import {DefineComponent, markRaw, reactive, watch} from "vue";
import {designComponent} from "../../../src/use/designComponent";
import {AppNavigator} from "./app-navigator";

export const AppNavigatorPage = designComponent({
    setup() {

        const navigator = AppNavigator.use.inject()

        const state = reactive({
            PageComponent: null as null | DefineComponent
        })

        const utils = {
            reset: async () => {

                const route = navigator.state.route
                if (!route) {
                    return
                }
                let {path} = route
                if (!path) {
                    return
                }
                if (path.charAt(0) === '/') {
                    path = path.slice(1)
                }

                const Component = (await import('story/pages/' + path)).default

                state.PageComponent = markRaw(Component)
            }
        }

        watch(() => navigator.state.route.path, utils.reset, {immediate: true})

        return {
            render: () => {
                const {PageComponent} = state
                return !!PageComponent ? <PageComponent/> : null
            }
        }
    },
})